 class TaobaoSearch {
     constructor() {
         // 1. 选择元素，准备url
         this.search = document.querySelector(".searchInput");
         this.list = document.querySelector(".searchList");
         this.url = "https://suggest.taobao.com/sug";
         // 2. 绑定事件
         this.addEvent()
     }
     addEvent() {
         const that = this;
         this.search.oninput = function () {
             that.key = this.value;
             // 3. 开启jsonp请求
             that.jsonp();
         }
     }
     jsonp() {
         const that = this;
         // 在局部作用域如何定义全局函数
         window.liyang = function (res) {
             // 4. 请求成功，解析数据
             that.msg = res.result;
             // 5. 生成下拉菜单
             that.createList()
         }
         // 添加一个script标签
         const s = document.createElement("script");
         // url拼接数据
         this.url = this.url + "?" + this.objTquery();
         // 设置src属性为请求url
         s.src = this.url;
         // script标签添加到页面
         document.body.appendChild(s);
     }
     objTquery() {
         // 将对象数据解析成query数据的工具
         const data = {
             k: 1,
             area: "c2c",
             q: this.key,
             code: "utf-8",
             ts: 1652512732893,
             callback: "liyang"
         }
         let str = ""
         for (let i in data) {
             str += `${i}=${data[i]}&`;
         }
         return str.slice(0, -1);
     }
     createList() {
         // 生成下拉菜单
         // console.log(this.msg);
         let str = "";
         this.msg.forEach(val => {
             // console.log(val[0])
             str += `<li>${val[0]}</li>`
         })
         this.list.innerHTML = str;

     }
 }

 export default TaobaoSearch;